<template>
<div>
    <div style="width:100%">
      <div class="page-title" style="width:100%;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><a @click="$router.go(-1)">问题详情</a></el-breadcrumb-item>
          <el-breadcrumb-item>问题整改</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 问题详情 -->
      <div class="page-content" style="font-size:20px;width:100%;border-top: 1px solid #dddddd;">
        <el-form label-width="150px" :model="problem">
          <el-row  style="padding-bottom:5px">
            <font style="font-size:15px;font-weight:bold">问题详情</font>
          </el-row> 
          <el-row style="padding-top:10px; border-top: 2px solid #dddddd">
              <el-col :span="12">
                <el-form-item label="检查人员：">{{ problem.checkPerson}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检查时间：">{{ problem.checkDate }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="受检单位：">{{ problem.parentCompanyName }}</el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item  label="受检班组：">{{ problem.companyName }}</el-form-item>         
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
               <el-form-item  label="检查地点：">{{ problem.checkStation }}</el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item  label="检查项目：">{{ problem.checkItem }}</el-form-item>
              </el-col> -->
            </el-row>
            <!-- <el-row>
                <el-form-item  label="检查项：">{{ problem.checkListItemName }}</el-form-item>
            </el-row> -->
            <el-row>
                <el-form-item  label="问题描述：">{{ problem.description }}</el-form-item>
            </el-row>
            <el-row>
                <el-form-item  label="备注：">{{ problem.note }}</el-form-item>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="问题类型：">{{ problem.problemType }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="问题程度：">{{ problem.problemRank }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="问题原因：">{{ problem.problemSource }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="安全绩效扣分：">{{ problem.lostScore }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
                <el-form-item  label="依据：">{{ problem.problemGist }}</el-form-item>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="责任人：">{{ problem.responsePersonName }}</el-form-item>   
              </el-col>
              <el-col :span="12">
               <el-form-item label="用工性质：">{{ problem.employmentProperty }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">   
                <el-form-item  label="所在岗位：">{{ problem.workingName }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="岗位工龄：">{{ problem.workingAge }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="整改责任人：">{{ problem.supervisorName }}</el-form-item>
              </el-col>   
              <el-col :span="12">
                <el-form-item  label="问题体系要素：">{{ problem.HseFactor }}</el-form-item>
              </el-col>
            </el-row>
        <!-- 检查附件 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查图片1： ">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach1" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach1" :alt="problem.checkAttach1" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查图片2：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="center" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach2" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach2" :alt="problem.checkAttach2" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查图片3：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach3" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach3" :alt="problem.checkAttach3" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查图片4：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach4" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach4" :alt="problem.checkAttach4" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="检查视频：">
              <el-card 
              v-model="problem.checkVideo"
              :show-file-list="false"
              accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
              :headers="{Authorization:currentUser.token}"
              style="height:251px;width:90%"
              >
              <video v-if="problem.checkVideo !='' && videoFlag1 == false"
                               :src="problem.checkVideo"
                               class="avatar video-avatar"
                               controls="controls">您的浏览器不支持视频播放</video> 
                        <i v-if="problem.checkVideo =='' && videoFlag1 == false"></i>
                    </el-card>
               </el-form-item>
          </el-col>
          </el-row>
      </el-form>
    
      <!-- 整改 -->
        <font style="font-size:15px;font-weight:bold">整改情况</font>
        <div style="width:100%;margin-left:0px;height:10px;border-top:2px solid #ddd"></div>
        <el-form :model="rectproblem" label-width="150px" :rules="rules" ref="problem">
           <el-row>   
               <el-form-item label="评判教育：" prop="education">
                 <el-checkbox v-model="rectproblem.education" size="medium ">勾选是否进行评判教育</el-checkbox>              
               </el-form-item>
               </el-row>
              
           <el-row>
             <el-col :span="12">
             <el-form-item label="整改附件：">
               图片大小不能超过12M，视频大小不能超过12M
             </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="12">
               <el-form-item label="整改图片1：">
                <el-upload
              v-model="rectproblem.rectAttach1" 
              :action="`/api/file_upload`"
              list-type="picture"
              :limit="1"
              :on-remove="handleRemove1"
              :before-upload="handleBeforeUpload"
              :file-list="fileList1"
              :auto-upload='true'
              :headers="{Authorization:currentUser.token}"
              name="file"
              :on-success="handleSuccess1"
              >
              <el-button  type="success" circle ><i class="el-icon-plus " ></i></el-button>
            </el-upload>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="整改图片2：">
                 <el-upload
                  v-model="rectproblem.rectAttach2"
                  :action="`/api/file_upload`"
                  list-type="picture"
                  :limit="1"
                  :on-remove="handleRemove2"
                  :before-upload="handleBeforeUpload"
                  :file-list="fileList2"
                  :auto-upload='true'
                  :headers="{Authorization:currentUser.token}"
                  name="file"
                  :on-success="handleSuccess2"
        
                  >
                  <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                </el-upload>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="12">
               <el-form-item label="整改图片3：">
                 <el-upload
              v-model="rectproblem.rectAttach3"
              :action="`/api/file_upload`"
              list-type="picture"
              :limit="1"
              :on-remove="handleRemove3"
              :before-upload="handleBeforeUpload"
              :file-list="fileList3"
              :auto-upload='true'
              :headers="{Authorization:currentUser.token}"
              name="file"
              :on-success="handleSuccess3"
              >
              <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
            </el-upload>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="整改图片4：">
                 <el-upload
                  v-model="rectproblem.rectAttach4"
                  :action="`/api/file_upload`"
                  list-type="picture"
                  :limit="1"
                  :on-remove="handleRemove4"
                  :before-upload="handleBeforeUpload"
                  :file-list="fileList4"
                  :auto-upload='true'
                  :headers="{Authorization:currentUser.token}"
                  name="file"
                  :on-success="handleSuccess4"
                  >
                  <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                </el-upload>
               </el-form-item>
             </el-col>
           </el-row>
         <el-row>
             <el-col :span="12">
             <el-form-item label="视频附件：">
              <el-upload class="avatar-uploader el-upload--text"
              v-model="rectproblem.rectVideo"
              :action="`/api/file_upload`"
              :file-list="videoList1"
              :limit="1"
              accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
              :before-upload="beforeUploadVideo1"
              :on-progress="uploadVideoProcess1"
              :headers="{Authorization:currentUser.token}"
              :on-success="handleVideoSuccess1"
              :on-remove="handlevideoRemove1"
              style="width:100%"
              >
              <video v-if="rectproblem.rectVideo !='' && videoFlag1 == false"
                :src="rectVideourl"
                class="avatar video-avatar"
                controls="controls">您的浏览器不支持视频播放</video> 
                <i v-if="rectproblem.rectVideo =='' && videoFlag1 == false" class="el-icon-plus avatar-uploader-icon"></i>
                <el-progress v-if="videoFlag1 == true"
                  type="circle"
                  :percentage="videoUploadPercent1"
                  style="margin-top:30px;"></el-progress>
              </el-upload>
              </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="相关文件：">
               <el-upload
               v-model="rectproblem.rectFile"
  class="upload-demo"
  :action="`/api/file_upload`"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handlefileSuccess"
  :before-remove="beforeRemove"
  multiple
  :limit="1"
  :on-exceed="handleExceed"
  :headers="{Authorization:currentUser.token}"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">上传整改相关文件</div>
</el-upload>
</el-form-item>
             </el-col>
           </el-row>
           <el-row>
               <el-form-item label="整改描述：" prop="rectDescription">
                 <el-input v-model="rectproblem.rectDescription" style="width:100%" type="textarea" :autosize="{ minRows: 4}"></el-input>
                 <!-- <el-select style="width:100%"  v-model="rectproblem.rectification" placeholder="请选择"  clearable>
                  <el-option v-for="item in Rectifications" :key="item.id"  :label="item.name"    :value="item.name"></el-option>
                  </el-select>                 -->
               </el-form-item>
           </el-row>
          <el-row class="buttons">
            <el-button type="primary"  @click="handleSubmit('problem')">确认</el-button>
            <el-button type="danger" @click="$router.go(-1)">取消</el-button>
          </el-row>
        </el-form> 
      </div>
    </div>
  </div>
</template>

<script>
import {GetCQProblemDetail} from '../../../services/problem'
import {UpdateCQRectifyProblem} from '../../../services/verify'
import {GetCurrentUser } from '../../../store/CurrentUser'
//import {GetEmployees} from '../../../services/employee'
//import {GetDictionary} from '../../../services/dictionary'
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

export default {
  data() {
    
    return {
      client:VueCookies.get("client"),
      rules: {
        // rectDescription:[{required: true, message: '请选择', trigger: ['blur', 'change']}],
        // penalty :[{required: true, message: '请选择', trigger: ['blur', 'change']}],
        // lostScore :[{required: true, message: '请选择', trigger: ['blur', 'change']}]
      },
      
      videoFlag1:false,
      videoUploadPercent1:0,
      isShowUploadVideo1:false,
      penaltys:[],
      lostScores:[],
      Rectifications:[],
      leaders:[], //负责人、
      fileList:[],//附件列表
      fileList1:[],//图片附件1
      fileList2:[],//图片附件2
      fileList3:[],//图片附件3
      fileList4:[],//图片附件4
      videoList1:[],
      rectVideourl:'',

      problem:{},
      rectproblem: {
        // rectiStatus:'已整改',//整改状态
        // rectiPerson:'',//整改负责人
        // rectiPersonId:'',
        checkrecordID:'',
        rectVideo:'',
        rectAttach1: "", //整改附件1234
        rectAttach2: "", 
        rectAttach3: "", 
        rectAttach4: "", 
        rectFile:"",
        rectDescription: "", // 整改问题描述
        education:true,
        status:"未整改"
      },
    
    };
    
  },
  mounted () {
    this.handleGetCQProblemDetail()
    //this.handleLeaderSearch()
    // this.getTime() //获取当前时间
    // this.handleGetlostScores ()
    // this.handleGetpenaltys()
    // this.handleGetRectifications()
  },
  computed:{
    currentUser(){
      return GetCurrentUser()
    }
  },

  methods: {
    //上传文件
    handleRemove(file, fileList) {
      this.rectproblem.rectFile="";
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(/**files, fileList*/) {
        this.$message.warning(`当前限制选择 1 个文件`);
      },
      handlefileSuccess(response) {
        this.rectproblem.rectFile = response.data;
        //console.log(this.fileList);
      },
      beforeRemove(file/**, fileList*/) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    //上传视频
    beforeUploadVideo1(file) {          //视频上传之前判断他的大小
      const isLt50M = file.size / 1024 / 1024  < 50;
      if (!isLt50M) {
        this.$message.error('上传视频大小不能超过50MB哦!');
        return false;
      }
      this.isShowUploadVideo1 = false;
    },
    uploadVideoProcess1(event, file){    //视频上传的时候获取上传进度传给进度条
      this.videoFlag1 = true;
      this.videoUploadPercent1 = parseInt(file.percentage);
      // console.log(this.videoUploadPercent)
    },
     handleVideoSuccess1(res) {           //视频上传成功之后返回视频地址
      this.isShowUploadVideo1 = true;
      this.videoFlag1 = false;
      this.videoUploadPercent1 = 0;
      this.rectproblem.rectVideo = res.data;
      this.rectVideourl='http://39.98.173.131:8080/resources/'+  this.rectproblem.rectVideo
      
    },
    handlevideoRemove1(file, videoList1) {
        this.rectproblem.rectVideo="";
        console.log(file, videoList1);
      },

    //数据字典获取“验证状态”。
    // handleGetlostScores () {
    //   GetDictionary({name: '扣分'}).then((res) => {
    //     this.lostScores = res.data
    //   }).catch((err) => {
    //     this.$message.error(err.message)
    //   })
    // },
    // handleGetpenaltys () {
    //   GetDictionary({name: '扣款'}).then((res) => {
    //     this.penaltys = res.data
    //   }).catch((err) => {
    //     this.$message.error(err.message)
    //   })
    // },
    // handleGetRectifications () {
    //   GetDictionary({name: '整改情况'}).then((res) => {
    //     this.Rectifications = res.data
    //   }).catch((err) => {
    //     this.$message.error(err.message)
    //   })
    // },
    //上传图片之前
    handleBeforeUpload(file){
      const isJPG =(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg');
      const isLt5M = file.size / 1024 / 1024 < 12;
      if(!isJPG){
        this.$message.error('请检查图片格式!');
      }
      if(!isLt5M) {
        this.$message.error('上传图片大小不能超过 12MB!');
      }
      return isJPG && isLt5M;
    },

    // 上传图片
    handleRemove1(file, fileList1) {
        this.rectproblem.rectAttach1=null;
        console.log(file, fileList1);
      },
    handleRemove2(file, fileList2) {
        this.rectproblem.rectAttach2=null;
        console.log(file, fileList2);
      },
    handleRemove3(file, fileList3) {
        this.rectproblem.rectAttach3=null;
        console.log(file, fileList3);
      },
    handleRemove4(file, fileList4) {
        this.rectproblem.rectAttach4=null;
        console.log(file, fileList4);
      },
    handleSuccess1(response){
     console.log(response)
      this.rectproblem.rectAttach1 = response.data
    },
    handleSuccess2(response){
       console.log(response)
      this.rectproblem.rectAttach2 = response.data
    },
    handleSuccess3(response){
       console.log(response)
      this.rectproblem.rectAttach3 = response.data
    },
    handleSuccess4(response){
      console.log(response)
      this.rectproblem.rectAttach4 = response.data
    },
    // 图片处理

    
    //根据problemID获取单个问题详细信息
    handleGetCQProblemDetail () {
      this.$route.params.id && localStorage.setItem('data',JSON.stringify(this.$route.params.id));
      const id = JSON.parse(localStorage.getItem('data'));
      GetCQProblemDetail(id).then((res) => {
        this.problem = res.data
        this.rectproblem.checkrecordID=this.problem.id
        this.rectproblem.status=this.problem.status
        //console.log(JSON.stringify(res.data))
      }).catch((err) => {
        this.$message.error(err.message)
      })
    }, 

    //确认验证，提交修改
    handleSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //console.log(JSON.stringify(this.rectproblem))
          UpdateCQRectifyProblem(this.rectproblem).then(() => {
            this.$message.success('操作成功')
            this.$router.go(-1) //返回上一url
          }, (err) => {
            this.$message.error(err.message)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
      
    },

  }
};
</script>

<style>
#main{
  /* position: relative; */
  width:1000px;
  height: 100%;
  margin-left: 2%;
  margin-right: 5%;
}
.above{
margin-top: 20px;
width: 1000px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 30px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: buttom;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.video-avatar {
  width: 400px;
  height: 200px;
}
</style>
